feat: integrate vite devtools by arashsheyda · Pull Request #226 · comarkdown/comark

arashsheyda · 2026-05-31T06:50:01Z

🔗 Linked issue

closes #9

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds Vite DevTools integration via the separate @comark/devtools package, and fixes the React <Comark> component for client-side environments.

Vite DevTools Integration

UI / RPC / host bridge live in @comark/devtools (not inside comark):

import { DevTools } from '@vitejs/devtools'
import comarkDevtools from '@comark/devtools/vite'

export default defineConfig({
  plugins: [DevTools(), comarkDevtools],
})

Vue: @comark/vue/vite soft-loads @comark/devtools/vite when installed — only need DevTools() + comark()
React / Svelte / HTML / Angular: add comarkDevtools manually (see examples)
Optional host bridge: import { connectDevtools } from '@comark/devtools/host-client'

This PR pins the pre-release via pkg.pr.new for development:

https://pkg.pr.new/comarkdown/comark-devtools/@comark/devtools@b168cd3

Other changes

While working on the devtools I found a bug with the React example while Vite DevTools was enabled:

App.tsx:13 <Comark> is an async Client Component. Only Server Components can be async at the moment.

The fix makes <Comark> no longer async so it works in both client and server contexts.

Screen.Recording.2026-05-31.at.1.00.26.AM.mov

📝 Checklist

I have linked an issue or discussion.
I have run pnpm verify and it passes.
I have updated the documentation accordingly.

vercel · 2026-05-31T06:50:08Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
comark	Ready	Preview	Jul 30, 2026 11:00am
comark-json-render	Ready	Preview	Jul 30, 2026 11:00am
comark-nextjs	Ready	Preview	Jul 30, 2026 11:00am
comark-nuxt	Error		Jul 30, 2026 11:00am
comark-svelte	Ready	Preview	Jul 30, 2026 11:00am
comark-sveltekit	Ready	Preview	Jul 30, 2026 11:00am
comark-twoslash	Ready	Preview	Jul 30, 2026 11:00am
comark-vue	Ready	Preview	Jul 30, 2026 11:00am

atinux · 2026-06-03T13:47:36Z

Amazing @arashsheyda

Now I would only keep Markdown & AST as tabs (not sure the others are useful)

So we have only one view
and the status (🟢 comark-2) on the far right of the tabs
And when having no-instance, displaying an empty state with "No or detected on the current page."

arashsheyda · 2026-06-03T23:42:44Z

@atinux working on the syntax highlighting rn! one thing that we changed (from the initial work) is comark-2 status is now shown as the page url. previously we were using the instance index but I thought showing the page url is better

farnabaz · 2026-06-19T15:29:32Z

@arashsheyda I moved Angular docs changes to #247 and merge original PR, feel free merge main into this PR and update for Angular.

…nderer

arashsheyda · 2026-06-20T08:41:43Z

@farnabaz I've updated the PR and docs and I believe it should be ready for final review 🤩

also yes, we're exposing the devtools path and I made sure to mention that in the docs

comark/packages/comark/package.json

Line 38 in 8428c6a

"./devtools-renderer": "./dist/devtools/renderer/index.js",

pkg-pr-new · 2026-06-22T00:33:52Z

Open in StackBlitz

comark

npm i https://pkg.pr.new/comarkdown/comark@226

@comark/angular

npm i https://pkg.pr.new/comarkdown/comark/@comark/angular@226

@comark/ansi

npm i https://pkg.pr.new/comarkdown/comark/@comark/ansi@226

@comark/html

npm i https://pkg.pr.new/comarkdown/comark/@comark/html@226

@comark/nuxt

npm i https://pkg.pr.new/comarkdown/comark/@comark/nuxt@226

@comark/react

npm i https://pkg.pr.new/comarkdown/comark/@comark/react@226

@comark/svelte

npm i https://pkg.pr.new/comarkdown/comark/@comark/svelte@226

@comark/vue

npm i https://pkg.pr.new/comarkdown/comark/@comark/vue@226

commit: d9905de

farnabaz · 2026-06-22T08:56:18Z

    ".": "./dist/index.js",
+    "./vite": "./dist/devtools/vite.js",
+    "./devtools": "./dist/devtools/index.js",
+    "./devtools-renderer": "./dist/devtools/renderer/index.js",


Suggested change

"./devtools-renderer": "./dist/devtools/renderer/index.js",

"./devtools": "./dist/devtools/index.js",

"./devtools/*": "./dist/devtools/*.js"

The more I this, the more I come to this idea that we need to move vite export under dev tools.

I would like this:

/src/devtools - index.ts (/devtools) - vite.ts (/vite) - renderer.ts (/renderer) - uitls (reso of internal stuff)

Having simpler export al so allows use to re-export /devtool from other packages

"./devtools": "./dist/devtools/index.js", "./devtools/*": "./dist/devtools/*.js"

…ndererMer

arashsheyda · 2026-06-25T21:57:51Z

@farnabaz would you mind do a final check ❤️

Move Vite DevTools UI out of comark into @comark/devtools (pkg.pr.new @b168cd3). Soft-load it from @comark/vue/vite and point examples/docs at the external package.

farnabaz · 2026-07-30T11:01:16Z

@arashsheyda Thanks for the PR and your patient 🙂
I moved main logic to (commit) and invited you to repo. (we make it public after finalizing it)
We are going to release separate devtools package which makes maintaining easier and also does not increase bundle size of main package.

arashsheyda · 2026-07-30T16:16:40Z

oh cool! thanks. checking it out now

arashsheyda · 2026-07-30T16:23:52Z

I just tested it out, looks awesome!

farnabaz · 2026-07-31T10:11:30Z

@arashsheyda Oh did you close this PR? We still need it for changes inside components.

arashsheyda · 2026-07-31T15:52:11Z

oh shoot yes. I'll open another one sorry

arashsheyda added 5 commits May 29, 2026 16:38

feat: integrate vite devtools

c68e8eb

chore: lint

8cc0777

fix(react): enhance Comark for ssr support

f12b101

fix: update docs

b72b265

fix: test

ae9e572

fix: update docs and remove push to app

076e4ab

vercel Bot deployed to Preview – comark-svelte May 31, 2026 07:00 View deployment

vercel Bot deployed to Preview – comark-vue May 31, 2026 07:00 View deployment

vercel Bot deployed to Preview – comark-json-render May 31, 2026 07:00 View deployment

vercel Bot had a problem deploying to Preview – comark-nextjs May 31, 2026 07:00 Failure

vercel Bot deployed to Preview – comark-twoslash May 31, 2026 07:00 View deployment

vercel Bot deployed to Preview – comark-sveltekit May 31, 2026 07:00 View deployment

vercel Bot deployed to Preview – comark-nuxt May 31, 2026 07:01 View deployment

vercel Bot deployed to Preview – comark May 31, 2026 07:07 View deployment

arashsheyda requested review from atinux and farnabaz June 2, 2026 00:09

fix: build

21b81e4

vercel Bot deployed to Preview – comark-svelte June 2, 2026 00:22 View deployment

vercel Bot deployed to Preview – comark-vue June 2, 2026 00:22 View deployment

vercel Bot deployed to Preview – comark-json-render June 2, 2026 00:23 View deployment

vercel Bot deployed to Preview – comark-twoslash June 2, 2026 00:23 View deployment

vercel Bot deployed to Preview – comark-nextjs June 2, 2026 00:23 View deployment

vercel Bot deployed to Preview – comark-sveltekit June 2, 2026 00:23 View deployment

vercel Bot deployed to Preview – comark-nuxt June 2, 2026 00:23 View deployment

vercel Bot deployed to Preview – comark June 2, 2026 00:32 View deployment

arashsheyda marked this pull request as ready for review June 2, 2026 18:18

feat: enhance devtools UI and functionality

f3f5471

farnabaz mentioned this pull request Jun 19, 2026

feat(frameworks): add angular support (@comark/angular) #178

Merged

8 tasks

arashsheyda added 3 commits June 20, 2026 02:28

Merge remote-tracking branch 'origin/main' into feat/vite-devtools-re…

70979f8

…nderer

feat: support devtools for agnular

2f2fb02

fix: address pr suggestion

8428c6a

arashsheyda and others added 5 commits June 20, 2026 02:52

fix: update devtools style

ea76f8a

fix: build style

ae6322a

chore: lint

1d3c6c5

chore: lint

a658cf8

fix: update bundle test

f288d64

farnabaz reviewed Jun 22, 2026

View reviewed changes

Comment thread packages/comark/src/devtools/renderer/styles.ts Outdated

arashsheyda added 3 commits June 22, 2026 15:28

fix: address pr suggestion 2

7f00c23

Merge remote-tracking branch 'origin/main' into feat/vite-devtools-re…

c8bb31e

…ndererMer

chore: update bundle test

d9905de

farnabaz added 7 commits July 28, 2026 17:13

Merge branch 'main' into feat/vite-devtools-renderer

0c3d24c

fix: test

f279c89

fix: use comark context

4bb4b88

fix: reduce delay

e385ea9

refactor: use standalone @comark/devtools package

5e11d4f

Move Vite DevTools UI out of comark into @comark/devtools (pkg.pr.new @b168cd3). Soft-load it from @comark/vue/vite and point examples/docs at the external package.

up

2a27458

Merge branch 'main' into feat/vite-devtools-renderer

b942156

	"./devtools-renderer": "./dist/devtools/renderer/index.js",
	"./devtools": "./dist/devtools/index.js",
	"./devtools/": "./dist/devtools/.js"

Uh oh!

Conversation

arashsheyda commented May 31, 2026 • edited by farnabaz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

Vite DevTools Integration

Other changes

📝 Checklist

Uh oh!

vercel Bot commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

atinux commented Jun 3, 2026

Uh oh!

arashsheyda commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

farnabaz commented Jun 19, 2026

Uh oh!

arashsheyda commented Jun 20, 2026

Uh oh!

pkg-pr-new Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

farnabaz Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arashsheyda commented Jun 25, 2026

Uh oh!

farnabaz commented Jul 30, 2026

Uh oh!

arashsheyda commented Jul 30, 2026

Uh oh!

arashsheyda commented Jul 30, 2026

Uh oh!

farnabaz commented Jul 31, 2026

Uh oh!

arashsheyda commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

arashsheyda commented May 31, 2026 •

edited by farnabaz

Loading

vercel Bot commented May 31, 2026 •

edited

Loading

arashsheyda commented Jun 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 22, 2026 •

edited

Loading